<template>
  <div class="home-view">
    <!-- <template v-for="item in list">
      <MovieItem :key="item.id" :item="item" @onDetail="onDetail"></MovieItem>
    </template> -->
    <el-button @click="tabClick">切换</el-button>
    <!-- 动态组件 -->
    <!-- <keep-alive>
    </keep-alive> -->
    <keep-alive>
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import MovieItem from '../../components/MovieListItem.vue'
import A from './components/A.vue'
import B from './components/B.vue'
export default {
  name: 'khome',
  data() {
    return {
      list: [],
      comName: 'A',
    }
  },
  components: {
    MovieItem,
    A,
    B,
  },
  computed: {
    // ...mapState(['movieList']),
  },
  created() {
    console.log('created----------keep-alive-home')
    this.FetchMovieList({}).then((res) => {
      this.list = res.list
    })
  },
  mounted() {
    console.log('mounted 生命周期')
  },
  activated() {
    console.log('activated： keep-alive 触发的生命周期', 'activated')
  },
  deactivated() {
    console.log('deactivated： keep-alive 的销毁生命周期')
  },
  destroyed() {
    console.log('destroyed： vue组件原有的销毁生命周期')
  },
  methods: {
    ...mapActions(['FetchMovieList']),
    tabClick() {
      if (this.comName === 'A') {
        this.comName = 'B'
      } else {
        this.comName = 'A'
      }
    },
    onDetail(item) {
      this.$router.push(`/about/${item.id}`)
    },
  },
}
</script>

<style></style>
